<template>
    <div class="myinfoupdate">
        <ul>
            <li>
                <label>用户名：</label>
                <input v-model.trim="userName" type="text">
            </li>
            <li>
                <label>手机号码：</label>
                <input v-model.trim="mobileNo" type="number">
            </li>
            <li>
                <label>验证码：</label>
                <input v-model.trim="verifyCode" type="number">
                <button @click="getVerifyCode">获取验证码</button>
            </li>
        </ul>
        <div class="upodateBtn">
            <div>
                <button @click="makeSure">确认</button>
                <button @click="goBack">返回</button>
            </div>
        </div>
    </div>
</template>
<script>
import { MessageBox } from 'mint-ui'
import {mapState, mapActions, mapMutations} from 'vuex'

export default {
    created(){
        this.getUserInfoUpdate();
    },
    data(){
        return {
            verifyCode:''
        }
    },
    computed:{
        ...mapState({
            userInfoUpdate: state => state.personModules.userInfoUpdate
        }),
        userName:{
            get(){
                return this.userInfoUpdate.userName
            },
            set(value){
                return this.updateUserName(value);
            }
        },
        mobileNo:{
            get(){
                 return this.userInfoUpdate.mobileNo;
            },
            set(value){
                return this.updateMobileNo(value);
            }
        }
    },
    methods:{
        ...mapActions({
            getUserInfoUpdate:'personModules/getUserInfoUpdate',
            makeVerifyCode:'personModules/makeVerifyCode',
            makeUserInfoUpdate:'personModules/makeUserInfoUpdate'
        }),
         ...mapMutations({
            updateUserName:'personModules/updateUserName',
            updateMobileNo:'personModules/updateMobileNo'
        }),
        getVerifyCode(){
            if(this.mobileNo.length != 11){ MessageBox.alert('请输入正确的手机号码','提示'); return; }
            let params = {
                mobileNo:this.mobileNo,
                codeType:4
            }
            this.makeVerifyCode(params);
        },
        makeSure(){
           let params = {
               userName:this.userName,
               mobileNo:this.mobileNo,
               verifyCode:this.verifyCode,
               accountType:this.userInfoUpdate.accountType
           }
           if(params.userName == '' || params.userName.length > 6){ MessageBox.alert('姓名格式错误，重新输入','提示'); return; }
           if(params.mobileNo == '' || params.mobileNo.length != 11){ MessageBox.alert('请输入正确的手机号码','提示'); return; }
           if(params.verifyCode == '' || params.verifyCode.length > 6){ MessageBox.alert('请输入正确的验证码','提示'); return; }
           this.makeUserInfoUpdate(params);
        },
        goBack(){
            this.$router.push('/person');
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../../assets/style/order.scss";
</style>

